import React from 'react';
import {Link} from "react-router";
import {Table, Card, Menu, Dropdown, Icon, Modal, message, Tag, Input, Button, Row, Col, Tabs, Rate , Steps, Popover} from 'antd';
import BreadcrumbCustom from "../BreadcrumbCustom";
import App from "../../common/App.jsx";
import U from "../../utils";
import "../../assets/css/orderDetail/orderDetail.less";

const URL = {
    list: 'adm/apply/list',
    key: 'applyId',
    update: 'adm/apply/process',
    first: '预约管理',
    second: "订单详情",
};

const Step = Steps.Step;

export default class ApplyEdit extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [],
            rateNum: null, // 评分
            user: this.props.user // 获取订单ID
        };
        this.timeout = null;
    }

    // 评分
    rateCount = (value) => {
        this.setState({
            rateNum:value
        })
    }
    
    // 进度条构建
    creatStep = () => {
        let arr = [{value:'1',createdtime:'21:21'},{value:'1',createdtime:'21:21'},{value:'1',createdtime:'21:21'},{value:'1',createdtime:'21:21'},{value:'1',createdtime:'21:21'}];
        return arr.map((item) => {
            return <Step title={item.value} description={item.createdtime} />
        })
    }

    render() {
        return (
            <div style={{ background: '#ECECEC', padding: '30px' }}>
                <Card
                    title="" bordered={false}
                    style={{marginBottom:'30px'}}
                >
                    <BreadcrumbCustom first={URL.first} second={URL.second} />
                    <div>
                        <p className='order-detail-title'>订单信息</p>
                    </div>
                    <Row gutter={16}>
                        <Col span={6}>
                            <p className='order-detail-p'>创建人：</p>
                            <p className='order-detail-p'>创建时间：</p>
                            <p className='order-detail-p'>订单时间：</p>                              
                        </Col>
                        <Col span={6}>
                            <p className='order-detail-p'>订购餐具：</p>
                            <p className='order-detail-p'>订单评分：
                                <Rate 
                                    disabled defaultValue={0}
                                    // onChange={(value)=>this.rateCount()}
                                />
                                <span style={{color:'#2f9be9',fontSize:'12px'}}>未评价</span>
                            </p> 
                        </Col>
                        <Col span={6}>
                            <p className='order-detail-p text-right'>状态</p>
                            <p className='order-status order-status-color2 text-right'>施工中</p>
                        </Col>
                        <Col span={6}>
                            <p className='order-detail-p text-right'>订单金额</p>
                            <p className='order-detail-price text-right'>￥56，808</p>
                        </Col>
                    </Row>
                </Card>
                <Card
                    title="" bordered={false}
                    style={{marginBottom:'30px'}}
                >
                    <div>
                        <p className='order-detail-title'>流程进度</p>
                    </div>
                    <Steps current={1} progressDot>
                        {this.creatStep()}
                    </Steps>
                </Card>
                <Card
                    title="" bordered={false}
                    style={{marginBottom:'30px'}}
                >
                    <div>
                        <p className='order-detail-title'>客户信息</p>
                    </div>
                    <Row gutter={16}>
                        <Col span={8}>
                            <p className='order-detail-p'>客户姓名：</p>
                            <p className='order-detail-p'>客户生日：</p>
                            <p className='order-detail-p'>客户性别：</p>
                            <p className='order-detail-p'>身份证号：</p>                         
                        </Col>
                        <Col span={8}>
                            <p className='order-detail-p'>客户公司：</p>
                            <p className='order-detail-p'>客户职位：</p>
                            <p className='order-detail-p'>联系电话：</p>
                            <p className='order-detail-p'>联系地址：</p>
                        </Col>
                        <Col span={8}>
                            <p className='order-detail-p'>
                                <span>检验单：</span>
                                <a>查看</a>
                            </p>
                            <p className='order-detail-p'>
                                <span>装修合同：</span>
                                <a>查看</a>                                
                            </p>
                            <p className='order-detail-p'>
                                <span>验收单：</span>
                                <a>查看</a>                        
                            </p>                            
                        </Col>                        
                    </Row>
                </Card>
                <Card
                    title="" bordered={false}
                >
                    <div>
                        <p className='order-detail-title'>客户信息</p>
                    </div>
                    <p className='order-detail-title2'>销售组</p>
                    <Row gutter={16}>
                        <Col span={8}>
                            <p className='order-detail-p'>员工姓名：</p>
                            <p className='order-detail-p'>员工工号：</p>
                            <p className='order-detail-p'>订单评分：
                                <Rate 
                                    disabled defaultValue={0}                                    
                                    // onChange={(value)=>this.rateCount()}
                                />
                                <span style={{color:'#2f9be9',fontSize:'12px'}}>未评价</span>
                            </p>
                            <p className='order-detail-p'>评价内容：</p>                            
                        </Col>
                        <Col span={8}>
                            <p className='order-detail-p'>职位：</p>
                            <p className='order-detail-p'>所属城市：</p>
                        </Col>
                        <Col span={8}>     
                        </Col>                        
                    </Row>
                    <p className='order-detail-title2'>施工组</p>                  
                    <Row gutter={16}>
                    <Col span={8}>
                            <p className='order-detail-p'>员工姓名：</p>
                            <p className='order-detail-p'>员工工号：</p>
                            <p className='order-detail-p'>订单评分：
                                <Rate 
                                    disabled defaultValue={2}                                
                                    // onChange={(value)=>this.rateCount()}
                                />
                                {/* <span style={{color:'#2f9be9',fontSize:'12px'}}>未评价</span> */}
                            </p>
                            <p className='order-detail-p'>评价内容：</p>                            
                        </Col>
                        <Col span={8}>
                            <p className='order-detail-p'>职位：</p>
                            <p className='order-detail-p'>所属城市：</p>
                        </Col>
                        <Col span={8}>
                            <p className='order-detail-p'>
                                <span>装修日志：</span>
                                <a>查看</a>                             
                            </p>                 
                        </Col>                        
                    </Row>                
                </Card>

            </div>
        )
    }
}